<template>
	<div>
		 <!-- 表格 -->
        <el-table
            :data="deptLIst"
						:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
						default-expand-all
						row-key="id"
            height="800"
            border
            style="width: 100%">
            <!-- type="index"获取索引值，从1开始 ，label显示标题，prop 数据字段名，width列宽 -->
            <el-table-column type="index" label="序号" width="150" align="center"></el-table-column>
            <el-table-column prop="name" label="部门名称" width="200" align="center"></el-table-column>
            <el-table-column prop="pid" label="部门id" width="150" align="center"></el-table-column>
             <el-table-column label="操作" width="500" align="center">
                <template slot-scope="scope">
									<el-button
										type="primary"
                    @click="handleAdd(scope.row.id)">添加</el-button>

                    <el-button
										type="success"
                    @click="handleEdit(scope.row.id)">编辑</el-button>

                    <el-button
                    type="danger"
                    @click="handleDelete(scope.row.id)">删除</el-button>

										<el-button
                    type="info"
                    @click="handleShow(scope.row.id)">查看</el-button>
                </template>
             </el-table-column>
        </el-table>
    <!-- 添加、编辑弹框控制 -->
     <el-dialog title="部门编辑" :visible.sync="dialogFormVisible" width="500px">
            <el-form 
            ref="deptForm"
            label-width="100px"
            label-position="right"
            style="width: 400px;"
            :model="deptForm">
                <el-form-item label="部门名称" prop="name" >
                <el-input v-model="deptForm.name" ></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addData()">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 部门详情弹框控制 -->
    <el-dialog title="部门详情" :visible.sync="deptVisible" width="500px">
           <div>
             <div class="person" v-for="(item,index) in personList.personList" :key="index">
               <div>姓名：{{item.name}}</div>
               <div>id：{{item.id}}</div>
               <div><el-image :src="item.imgUrl" style="width: 100px;height:100px;margin-left:10px"></el-image></div>
             </div>
           </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="deptVisible = false">取 消</el-button>
                <el-button type="primary" @click="deptVisible = false">确 定</el-button>
            </div>
        </el-dialog>
	</div>
</template>

<script>

import deptApi from '@/api/dept'

export default {
    data () {  
        return{  
					deptLIst:[],//部门列表
          dialogFormVisible: false,//弹框控制
          deptVisible: false,//部门详情控制
          options:'',
          deptForm:{  //添加部门提交数据
            name:'',
            pid:'',
            id:''
          },
          dept:{ //部门编辑数据
            name:'',
            id:''
          },
          personList:{},//部门详情数据
        }
    },

    created() {
        // 初始化获取列表数据
        this.fetchData()
    },
   
    methods: {  
      // 获取部门数据
			fetchData(){
				deptApi.search().then(res =>{
					console.log('---部门数据---',res.data.data);
					this.deptLIst = res.data.data
				})
			},
      // 提交部门数据信息新增
      addData() {
        if(this.options == '添加'){
          if(this.deptForm.name){
            deptApi.add(this.deptForm).then(response => {
              console.log('---response---',response);
              const resp = response.data
              if(resp.flag) {
                //新增成功，刷新列表数据
                this.fetchData()
                this.dialogFormVisible = false // 关闭窗口
                this.$message({
                    message: '添加成功',
                    type: 'success'
                })
              }else {
                // 失败，来点提示信息
                this.$message({
                    message: resp.msg,
                    type: 'warning'
                })
              }
            })
          }else {
              this.$message({
                message: '请输入部门名称',
                type: 'warning'
              })
          }
          }else if(this.options == '编辑'){
             deptApi.update(this.deptForm).then(response => {
                const resp = response.data
                if(resp.flag) {
                  // 刷新列表
                  this.fetchData()
                  this.dialogFormVisible = false
                  this.$message({
                      message: '修改成功',
                      type: 'success'
                  })
                }else {
                  this.$message({
                      message: resp.message,
                      type: 'warning'
                  })
                }
            })
          }else{
             this.$message({
                message: '请选择正确操作！',
                type: 'warning'
              })
          }
        },
      // 部门添加
      handleAdd(id){
        this.options = '添加'
        this.deptForm = {}
        this.dialogFormVisible = true
        this.deptForm.pid = id
      },
      // 部门编辑
      handleEdit(id){
        this.options = '编辑'
        this.deptForm = {}
        this.dialogFormVisible = true
        this.deptForm.id = id

      },
      // 部门删除
      handleDelete(id){
        this.$confirm('确认删除部门吗？', '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          }).then(() => {
          deptApi.deleteById(id).then(response => {
            const resp = response.data
            this.$message({
              message: resp.message,
              type: resp.flag ? 'success': 'error'
            })
              if(resp.flag) {
                // 删除成功，刷新列表数据
                this.fetchData()
                this.$message({  
                    message: '删除成功',
                    type: 'success'
                })
              }
          })
          }).catch((error) => {
            console.log(error)
          })
      },
      // 部门查看
      handleShow(id){
         this.deptVisible = true
         deptApi.getById(id).then(res =>{
           console.log('---部门详情---',res.data.data)
           this.personList = res.data.data
         })
      },
    }
}
</script>
<style lang="css">
.person{
  height: 100px;
  font-size: 18px;
  border-bottom: 1px solid #ccc;
  padding: 10px 0;
  display: flex;
  justify-content: space-between;
  align-content: center;
}
</style>
